<template>
  <layout title="radio单选框">
    <layout-content title="基础使用">
      <tn-radio-group v-model="basicRadio">
        <tn-radio name="1">选项1</tn-radio>
        <tn-radio name="2" disabled>选项2</tn-radio>
        <tn-radio name="3">选项3</tn-radio>
      </tn-radio-group>
    </layout-content>

    <layout-content title="默认选中">
      <tn-radio-group v-model="defaultRadio">
        <tn-radio :name="1">选项1</tn-radio>
        <tn-radio :name="2">选项2</tn-radio>
        <tn-radio :name="3">选项3</tn-radio>
      </tn-radio-group>
    </layout-content>

    <layout-content title="修改尺寸">
      <tn-radio-group size="sm" v-model="basicRadio">
        <tn-radio name="1">选项1</tn-radio>
        <tn-radio name="2">选项2</tn-radio>
        <tn-radio name="3">选项3</tn-radio>
      </tn-radio-group>
      <view class="tn-margin-top-sm">
        <tn-radio-group v-model="basicRadio">
          <tn-radio name="1">选项1</tn-radio>
          <tn-radio name="2">选项2</tn-radio>
          <tn-radio name="3">选项3</tn-radio>
        </tn-radio-group>
      </view>
      <view class="tn-margin-top-sm">
        <tn-radio-group size="lg" v-model="basicRadio">
          <tn-radio name="1">选项1</tn-radio>
          <tn-radio name="2">选项2</tn-radio>
          <tn-radio name="3">选项3</tn-radio>
        </tn-radio-group>
      </view>
      <view class="tn-margin-top-sm">
        <tn-radio-group size="xl" v-model="basicRadio">
          <tn-radio name="1">选项1</tn-radio>
          <tn-radio name="2">选项2</tn-radio>
          <tn-radio name="3">选项3</tn-radio>
        </tn-radio-group>
      </view>
    </layout-content>

    <layout-content title="禁止点击标签">
      <tn-radio-group v-model="basicRadio" disabled-label>
        <tn-radio name="1">选项1</tn-radio>
        <tn-radio name="2">选项2</tn-radio>
        <tn-radio name="3">选项3</tn-radio>
      </tn-radio-group>
    </layout-content>

    <layout-content title="换行显示">
      <tn-radio-group v-model="basicRadio" wrap>
        <tn-radio name="1">选项1</tn-radio>
        <tn-radio name="2">选项2</tn-radio>
        <tn-radio name="3">选项3</tn-radio>
      </tn-radio-group>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-radio-group v-model="basicRadio" active-color="tn-bg-blue">
        <tn-radio name="1">选项1</tn-radio>
        <tn-radio name="2">选项2</tn-radio>
        <tn-radio name="3">选项3</tn-radio>
      </tn-radio-group>
      <view class="tn-margin-top-sm">
        <tn-radio-group v-model="basicRadio">
          <tn-radio name="1" active-color="tn-bg-red">选项1</tn-radio>
          <tn-radio name="2" active-color="tn-bg-blue">选项2</tn-radio>
          <tn-radio name="3" active-color="tn-bg-green">选项3</tn-radio>
        </tn-radio-group>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnRadio from '@/tuniao-ui/components/tn-radio/src/Radio.vue'
import TnRadioGroup from '@/tuniao-ui/components/tn-radio/src/RadioGroup.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// radio选项值
let basicRadio = ref<string>('')
let defaultRadio = ref<number>(1)
</script>

<style lang="scss" scoped>
</style>
